<!DOCTYPE html>
<html lang="en">
<head>

    <#include "${request.contextPath}/header.ftl"/>

    <title>清汇教育-首页</title>
    <style>
        .marquee-container{
            overflow:hidden;
            width: 84%;
            margin: 0 auto;
        }
        .direction_left img{
            max-height:300px;
            height:300px;
       }
    </style>
    <script src="${ctx}/static/js/jquery-1.12.4.min.js"></script>
    <script src="${ctx}/static/js/jQuery.marquee.min.js"></script>

</head>
<body>
      <!-- nav部分 -->
      <#include "${request.contextPath}/nav.ftl"/>

      <!-- banner部分 -->
      <div class="banner case">
        <div class="title">
          <p>清汇教育</p>
          <p class="en">专注教育，汇你所会</p>
        </div>
      </div>
    <!-- 学校简介部分 -->
    <div class="info">
        <p>QING  HUI  EDUCATION</p>
    </div>
    <!-- 图片和文字介绍 -->
    <#list configList as config>

        <#if config_index%2==0>
            <ul class="pictext">
                <li><img src="${ctx}/static/${config.imageUrl}" alt="图片${config_index}" style="width: 100%;"></li>
                <li class="txt">
                    <p>
                        ${config.textDesc}
                    </p>
                </li>
            </ul>
        <#else>
            <ul class="pictext">
                <li class="txt">
                    <p>
                        ${config.textDesc}
                    </p>
                </li>
                <li><img src="${ctx}/static/${config.imageUrl}" alt="图片${config_index}" style="width: 100%;"></li>
            </ul>
        </#if>

    </#list>


    <!-- 学员风采  滚动部分  -->
    <div class="stu-title">
        <p>学 员 风 采</p>
    </div>
    <!-- 无缝滚动 -->
    <div class="marquee-container">
        <div class="direction_left">
            <table>
                <tr>
                    <#list stuList as student>
                        <td><img src="${ctx}/static/${student.imageUrl}"></td>
                    </#list>
                    <#--<td><img src="../static/img/marquee_img/pic1.jpg"></td>-->
                    <#--<td><img src="../static/img/marquee_img/pic2.jpg"></td>-->
                    <#--<td><img src="../static/img/marquee_img/pic3.jpg"></td>-->
                    <#--<td><img src="../static/img/marquee_img/pic4.jpg"></td>-->
                </tr>
            </table>
        </div>
    </div>

    <!-- 校园一角 -->
    <div class="stu-title">
            <p>校 园 一 角</p>
    </div>
    <ul class="school">
        <#list campusList as campus>
            <li>
                <img src="${ctx}/static/${campus.campusCornerImgUrl}" alt="">
                <h4>${campus.campusCornerTitle!''}</h4>
            </li>
        </#list>

        <#--<li>-->
            <#--<img src="../static/img/student_img/student1.jpg" alt="">-->
            <#--<h4>学校的一只小松鼠</h4>-->
        <#--</li>-->
        <#--<li>-->
            <#--<img src="../static/img//student_img/student2.jpg" alt="">-->
            <#--<h4>学校的一只小猫咪</h4>-->
        <#--</li>-->
        <#--<li>-->
            <#--<img src="../static/img//student_img/student3.jpg" alt="">-->
            <#--<h4>杭州西湖</h4>-->
        <#--</li>-->
        <#--<li>-->
            <#--<img src="../static/img/student_img/student1.jpg" alt="">-->
            <#--<h4>学校的一只小松鼠</h4>-->
        <#--</li>-->
        <#--<li>-->
            <#--<img src="../static/img/student_img/student2.jpg" alt="">-->
            <#--<h4>小猫</h4>-->
        <#--</li>-->
        <#--<li>-->
            <#--<img src="../static/img/student_img/student3.jpg" alt="">-->
            <#--<h4>断桥残雪</h4>-->
        <#--</li>-->
    </ul>
    <!-- 页脚部分 -->
    <footer>
        <#include "${ctx}/footer.ftl"/>
    </footer>
   

    <script src="${ctx}/static/js/plugins/layui/layui.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script>
    layui.config({
        base: '${ctx}/static/js/'
    }).use('firm'); 
    $(function(){
    $('.direction_left').marquee({
        'direction' : 'left'
    });
});
    </script>   
   
    
</body>
</html>